<!--
 * @Author: Meow
 * @Date: 2019-10-10 20:22:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2019-10-20 16:00:04
 * @Description: 字典管理
 -->
<template>
  <div class="container">
    <div class="view">
      <div class="top tr">
        名称：
        <el-input placeholder="请输入名称"
                  v-model="searchVal"
                  size="small"
                  class="input-with-select">
          <el-button slot="append"
                     size="small"
                     icon="el-icon-search"
                     @click="search"></el-button>
        </el-input>
        <el-button type="primary"
                   size="small"
                   @click="addTableList">添加</el-button>
        <el-button type="danger"
                   size="small"
                   @click="deleteTableAll">删除</el-button>
      </div>
      <div class="table">
        <el-scrollbar :native="false"
                      tag="section"
                      class="el-scroll">
          <el-table :data="tableData"
                    :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                    v-loading="Loading"
                    element-loading-text="数据加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(21, 29, 54, 0.8)"
                    border
                    highlight-current-row
                    @selection-change="selChange">
            <el-table-column type="selection"
                             width="35"></el-table-column>
            <el-table-column align="center"
                             :show-overflow-tooltip="true"
                             prop="typeName"
                             label="名称">
              <template slot-scope="scope">
                <span @click="pushDictType(scope.row)"
                      style="color:blue;cursor:pointer;">{{scope.row.typeName}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center"
                             :show-overflow-tooltip="true"
                             prop="remarks"
                             label="备注">
            </el-table-column>
            <el-table-column label="操作"
                             width="200"
                             align="center">
              <template slot-scope="scope">
                <el-button size="mini"
                           type="danger"
                           @click="deleteTableList(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
      <div class="bottom">
        <el-pagination layout="total, sizes, prev, pager, next"
                       background
                       :page-count="10"
                       :page-sizes="[5, 10, 20, 40]"
                       :page-size="page.pageSize"
                       :total="page.total"
                       :current-page="page.pageNum"
                       @current-change="changePage"
                       @size-change="sizeChange"></el-pagination>
      </div>
    </div>
    <!-- 点击添加按钮  弹窗 -->
    <el-dialog title="添加字典表信息"
               :visible.sync="addTableShow"
               width="30%">
      <el-form :model="addListForm"
               ref="addFormRefs"
               :rules="addFormRules"
               class="demo-form-inline">
        <el-form-item label="名称："
                      prop="typeName">
          <el-input v-model="addListForm.typeName"
                    placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="addListForm.remarks"
                    placeholder="备注"></el-input>
        </el-form-item>
        <el-form-item>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="addTableShow = false;addListForm={remarks:'',typeName: ''}">取 消</el-button>
        <el-button type="primary"
                   @click="onSubmitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import Table from "./components/Table";
export default {
  name: "DictionaryTable",
  components: {
    // Table
    // homeView
  },
  props: {
    tableData: {
      type: Array,
      default: () => { }
    },
    label: [],
    page: {
      type: Object,
      default: () => { }
    }
  },
  filters: {},
  computed: {},
  watch: {},
  data () {
    return {
      addFormRules: {
        typeName: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ]
      },
      options: [],
      value: [],
      list: [],
      Loading: false,
      Versiontime: "2019-09-17",
      searchVal: '',
      selectData: [],
      addTableShow: false,
      addListForm: {
        typeName: '',
        remarks: ''
      }
    };
  },
  created () { },
  mounted () {
    // this.list = this.states.map(item => {
    //   return { value: item, label: item };
    // });
  },
  methods: {
    // 点击删除按钮
    deleteTableList (data) {
      console.log(data)
      this.$emit('deleteTableList', data)
    },
    //  搜索框选中
    selectValue (value) {
      console.log(value);
      this.value = value;
    },
    selChange (data) {
      console.log(data)
      this.selectData = data
    },
    //  点击搜索按钮
    search () {
      console.log(this.searchVal)
      this.$emit('search', this.searchVal)
    },
    //  点击分页按钮
    changePage (pageSize) {
      console.log(pageSize)
      this.$emit('changePage', pageSize)
    },
    //  切换页数
    sizeChange (pageNum) {
      console.log(pageNum)
      this.$emit('sizeChange', pageNum)
    },
    //  多删
    deleteTableAll () {
      if (this.selectData.length === 0) return
      console.log(this.selectData)
      this.$emit('deleteTableAll', this.selectData)
    },
    //  点击添加按钮
    addTableList () {
      this.addTableShow = true
    },
    //  表单点击确定按钮
    onSubmitForm () {
      console.log(this.addListForm)
      this.$refs.addFormRefs.validate((valid) => {
        if (valid) {
          this.$emit('onSubmitForm', this.addListForm)
          this.addTableShow = false
        }
      })

    },
    //  点击切换字典类型
    pushDictType (data) {
      console.log(data)
      this.$router.push({
        path: `/${_routerPath.routerName}/DictionaryTable/DictionaryType`,
        query: data
      });
    }
  },
  destroyed () { }
};
</script>

<style scoped lang="less">
@import url("./DictionaryTable.less");
.homeLogic {
  width: 100%;
  height: 100%;
}
</style>
